<template>
  <div class='searchResult'>
    <div class='header'>
      <span @click="backToDocterMainPage" class='backIcon'>{{point}}</span>
      <span>搜索结果</span>
    </div>
    <div class="search">
      <input type="text" placeholder="症状、 疾病、 科室、 医院、 医生等" v-model="searchContent" class='searchInput'>
    </div>
    <div class="content">
      <ul class="options">
        <li>综合排序</li>
        <li>全国</li>
        <li>主任医师</li>
      </ul>
      <div v-for="(item, index) in detail" :key="index">
        <div class='authorWrapper'>
          <div class="avatar">
            <img src="../../../../public/image/user3.png" alt="" class='avatarPic'>
          </div>
          <div class="detail">
            <div class='firstLine'><span class='authorName'>{{item.name}}</span><span class='time'>{{item.title}}</span></div>
            <div class='secondLine authorTitle'>{{item.hospital}} {{item.department}}</div>
            <div class='description'>{{item.description}}</div>
          </div>
          <div class='backToList'>></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {get, post} from '../../../utils/request'
import api from '../../../config/api'
export default {
  watch: {
    searchContent(newVal, oldVal) {
      const token = wx.getStorageSync('token')
      post(api.searchCondition, this.searchValue, token).then(res => {
        console.log(res)
        if(res.data.msg === 'success') {
          console.log(this.detail)
          this.detail = res.data.data ? res.data.data : []
        }
      })
    }
  },
  data () {
    return {
      searchValue: null,
      point: '<',
      searchContent: '',
      detail: [
        {
          avatar: '../../../../public/image/user1.png',
          name: '刘妙春',
          title: '主任医师',
          hospital: '北大医院',
          department: '神经外科',
          description: '颅脑肿瘤(如脑献礼，胶质瘤...)'
        },
        {
          avatar: '../../../../public/image/user2.png',
          name: '李民',
          title: '主任医师',
          hospital: '北大医院',
          department: '神经外科',
          description: '颅脑肿瘤(如脑献礼，胶质瘤...)'
        },
        {
          avatar: '../../../../public/image/user3.png',
          name: '陶云',
          title: '主任医师',
          hospital: '北大医院',
          department: '神经外科',
          description: '颅脑肿瘤(如脑献礼，胶质瘤...)'
        },
        {
          avatar: '../../../../public/image/user2.png',
          name: '夏群',
          title: '主任医师',
          hospital: '北大医院',
          department: '神经外科',
          description: '颅脑肿瘤(如脑献礼，胶质瘤...)'
        },
        {
          avatar: '../../../../public/image/user1.png',
          name: '牛逼',
          title: '主任医师',
          hospital: '北大医院',
          department: '神经外科',
          description: '颅脑肿瘤(如脑献礼，胶质瘤...)'
        }
      ]
    }
  },
  methods: {
    backToDocterMainPage () {
      wx.navigateBack({
        delta: 1
      })
    },
  },
  mounted() {
    console.log(this.$route.query)
    const { name, id } = this.$route.query
    this.searchValue = this.$route.query
    this.searchContent = name
  }
}
</script>

<style scoped>
.searchResult {
  position: absolute;
  width: 100%;
  height: 100%;
}
.header{
  height: 150rpx;
  line-height: 150rpx;
  width: 100%;
  background-color: #f3f1f4;
  padding-left: 40rpx;
  font-size: 36rpx;
  color: #000000;
}
.header .backIcon {
  display: inline-block;
  margin-right: 20rpx;
}
.search{
  position: absolute;
  top: 150rpx;
  height: 100rpx;
  width: 100%;
  background-color: #f3f1f4;
  box-sizing: border-box;
  padding: 0 20rpx;
  font-size: 32rpx;
  color: #000000;
}
.searchInput{
  display: block;
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 50rpx;
  background-color: #ffffff;
  border: 1rpx solid transparent;
  box-sizing: border-box;
  padding: 0 20rpx;
  font-size: 26rpx;
}
.content {
  position: absolute;
  box-sizing: border-box;
  padding: 0 20rpx;
  top: 250rpx;
  bottom: 0;
  width: 100%;
  color: #282828;
}
.options {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #dcdcdc;
}
.options li {
  width: 33%;
  text-align: center;
  color: #000000;
  font-size: 32rpx;
  float: left;
}
.authorWrapper {
  width: 100%;
  padding-top: 5rpx;
  padding-bottom: 15rpx;
  height: 170rpx;
  line-height: 150rpx;
  border-bottom: 1rpx solid #dcdcdc;
  position: relative;
}
.commit {
  float: right;
  line-height: 100rpx;
  position: relative;
  color: #3c61ee;
}
/*  */
.commit img {
  width: 40rpx;
  height: 40rpx;
  float: right;
  margin-top: 30rpx;
  margin-left: 10rpx;
  /* position: absolute;
  top: 20rpx; */
}
.avatar {
  float: left;
  box-sizing: border-box;
  padding: 10rpx;
  height: 100rpx;
  line-height: 100rpx;
}
.avatarPic {
  width: 80rpx;
  height: 80rpx;
}
.detail {
  float: left;
  margin-left: 20rpx;
  height: 100rpx;
  line-height: 100rpx;
}
.firstLine, .secondLine, .description {
  height: 50rpx;
  line-height: 50rpx;
}
.authorName {
  font-size: 26rpx;
  color: #6c6c6c;
  margin-right: 10rpx;
}
.time, .authorTitle {
  color: #6c6c6c;
  font-size: 24rpx;
}
.authorTitle{
   color: #3c61ee;
}
.articleContent {
  font-size: 26rpx;
  color: #000000;
}
.description {
  color: #6c6c6c;
  font-size: 24rpx;
}
.backToList {
  position: absolute;
  right: 20rpx;
  top: -40rpx;
}
</style>